<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      //变量
      let a=10
      //常量
      const b=5
      //b=9 // 常量的值不能被修改

      //数组
      const arr =[1,2,3,4,5,6]
      //删除数组中的一个元素
      arr.shift()//不论括号里填什么，删除的都是arr数组中的第一个元素
      console.log(arr)
      
      //birth.arr(8); error //在让一个对象使用方法时要  对象.方法
      //arr.birth(7) error //这是对 对象 才能进行的操作（添加）
      arr.push(9)//添加一个元素
      console.log(arr)
      
      //对象
      const obj= {
        name:"xiaoming",  //xiaoming 字符串要加""
        age:15
      }
      console.log(obj);
      obj.age=18//修改属性
      obj.status="student"//添加属性
      //在控制台输出 obj对象
      console.log(obj);


      //普通字符串
      let name = "zhangsan"
      let age  = 18

    //模板版字符串
      // ` `
    //好处 1.可以任意换行
      //let htmlStr = `<div class = "hot-goods-box"><h1>XXX商品售卖</h1><p>这个商品太好卖了，已销售XXX万件了</p></div>`等同与下面那个字符串
      let htmlStr = `<div class = "hot-goods-box">
        <h1>XXX商品售卖</h1>
        <p>这个商品太好卖了，已销售XXX万件了</p>   
      </div>`
    //2.可嵌入表达式
      //普通字符串版
      let str1 = "My name is "+ name +", I am "+ age + ", 我" + (age>=18 ? "成年了" : "还没成年")
      console.log(str1)
      //模板字符串 版本
      let str2 = `My name is ${name} , I am ${age}, 我${(age>=18 ? "成年了" : "还没成年")}`
      console.log(str2)
    </script>
  </body>
</html> 
